import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { useRequest } from '@umijs/hooks';
import React, { useState, useRef, useCallback, useEffect } from 'react';

import { Input, Modal ,DatePicker, Select, Row, Col, } from 'antd';
import { queryCityInfo } from '../service';


const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const CreateForm = props => {
  const { createModalVisible, form, onSubmit: handleAdd, onCancel } = props;

  const { data: selectData } = useRequest(queryCityInfo);

  useEffect(()=>{
    if (createModalVisible) {
    }
  }, [createModalVisible])

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  return (
    <Modal
      destroyOnClose={true}
      title="新建超售信息"
      visible={createModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem
        {...formLayout}
        label="航班号"
       >
        {form.getFieldDecorator('flightNum', {
          rules: [
            {
              required: true,
              message: '请输入航班号',
            }
          ],
        })(<Input maxLength={6} placeholder="请输入" />)}
      </FormItem>
      <FormItem
        label="航班日期"
        {...formLayout}
        >
        {form.getFieldDecorator('flightDate', {
          rules: [
            {
              required: true,
              message: '请选择航班日期',
            },
          ],
        })(
          <DatePicker
            format="YYYY-MM-DD"
            style={{width: '100%'}}
          />
        )}
      </FormItem>
      <FormItem
        {...formLayout}
        label="出发航站"
      >
        {form.getFieldDecorator('airportS', {
          rules: [
            {
              required: true,
              message: '请选择出发航站！',
            },
          ],
        })(
          <Select
            style={{width: '100%'}}
            allowClear={true}
            showSearch
            placeholder="请选择"
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
          >
            {selectData &&
              selectData.map((v, i) => {
                return (
                  <Option key={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Option>
                )
              })
            }
          </Select>)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="到达航站"
      >
        {form.getFieldDecorator('airportE', {
          rules: [
            {
              required: true,
              message: '请选择到达航站！',
            },
          ],
        })(<Select
            style={{width: '100%'}}
            allowClear={true}
            showSearch
            placeholder="请选择"
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
          >
            {selectData &&
              selectData.map((v, i) => {
                return (
                  <Option key={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Option>
                )
              })
            }
          </Select>)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="可提供座位数"
      >
        {form.getFieldDecorator('seatCountDesc', {
          rules: [
            {required: true, message: '请输入可提供座位数！'},

          ],
        })(<Input   placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="预计超售人数"
      >
        {form.getFieldDecorator('plancount', {
          rules: [
            {required: true, message: '请输入预计超售人数！'},
          ],
        })(<Input  placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="实际超售人数"
      >
        {form.getFieldDecorator('actcount', {
        })(<Input  placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="补偿金额"
      >
        {form.getFieldDecorator('amountPaid', {
          
        })(<Input  placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="旅客处理情况"
      >
        {form.getFieldDecorator('note', {
        })(<TextArea rows={4} maxLength={200} placeholder="请输入" />)}
      </FormItem>
    </Modal>
  );
};

export default Form.create()(CreateForm);
